<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM: document</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; }
            .wrapper>* { margin: 10px ; border: 1px solid green; padding: 10px; }
            .wrapper>p { border: none ; color: blue ;}
            .wrapper>div { display: flex ; }
            .wrapper>div span:first-child { flex-basis: 300px; }
            .wrapper>div span:last-child { flex-basis: 200px; }
        </style>
    </head>
    <body>

        <p>Document Object Model : document 和 Document</p>

        <div class="wrapper">
            <p>Document.prototype 属性:</p>
        </div>

        <script type="text/javascript">
            console.log( Object.getOwnPropertyNames( Document ) );
            console.log( '- '.repeat(30) );

            // 用 document 提供的支持获取页面元素
            const w = document.querySelector( '.wrapper' );
            const names = Object.getOwnPropertyNames( Document.prototype );
            names.forEach( name => {
                // 利用 document 提供的支持创建新的 元素(Element)
                let element = document.createElement( 'div' );
                // 为新创建的元素设置内部的HTML内容
                element.innerHTML = `<span>${name}</span><span>${typeof document[name] }</span>`;
                // 调用从 Node.prototype 继承的 appendChild 将新元素添加到 w 元素内部末尾
                w.appendChild( element );
            });

            // 在浏览器中 document 是 Document 对象的实例
            console.log( Object.getOwnPropertyNames( document ) );

            console.log( document.location === window.location );
        </script>

        <p>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document">
                MDN Web Docs: Document
            </a>
        </p>
    </body>
</html>